/*
 * @message: 描述
 * @Author: Roy
 * @Email: cx_love_xc@163.com
 * @Github: cx_love_xc@163.com
 * @Date: 2022-01-15 15:21:39
 * @LastEditors: Roy
 * @LastEditTime: 2022-01-16 16:05:56
 * @Deprecated: 否
 * @FilePath: /blog/src/admin/container/home/component/areaItem/components/list/index.jsx
 */


import React, { useCallback } from 'react';
import { Input, Button } from 'antd'
import styles from './style.module.scss'


const List = (props) => {
    const {
        children = [], changeChildren,
    } = props;
    //添加列表 
    const addItemToChildren = useCallback(() => {
        const newChildren = [...children]
        newChildren.push({
            name: 'Item',
            attributes: {
                title: '',
                desc: '',
                imageUrl: '',
                link: '',
            },
            children: []
        });
        changeChildren(newChildren)
    }, [children])
    //删除列表
    const deleteItemFromChildren = useCallback((index) => {
        const newChildren = [...children]
        newChildren.splice(index, 1);
        changeChildren(newChildren)
    }, [children])
    //改变列表数据
    const changeChildrenItem = useCallback((index, key, value) => {
        const originItem = children[index];
        const item = { ...originItem };
        item.attributes[key] = value;
        const newChildren = [...children];
        newChildren.splice(index, 1, item);
        changeChildren(newChildren)
    }, [children])
    return (
        <div className={styles.wrapper}>
            <Button
                type='primary'
                className={styles.button}
                onClick={addItemToChildren}
            >新增列表项</Button>

            {
                children.map(({ attributes: { title, desc, imageUrl, link } }, index) => (
                    <div className={styles.area} key={index}>
                        <div className={styles.delete} onClick={() => deleteItemFromChildren(index)}>X</div>
                        <div className={styles.row}>
                            <span className={styles.label}>标题</span>
                            <Input
                                value={title}
                                className={styles.content}
                                placeholder="请输入标题"
                                onChange={(e) => changeChildrenItem(index, 'title', e.target.value)}
                            />
                        </div>
                        <div className={styles.row}>
                            <span className={styles.label}>描述</span>
                            <Input
                                value={desc}
                                className={styles.content}
                                placeholder="请输入描述"
                                onChange={(e) => changeChildrenItem(index, 'desc', e.target.value)}
                            />
                        </div>
                        <div className={styles.row}>
                            <span className={styles.label}>图片</span>
                            <Input
                                value={imageUrl}
                                className={styles.content}
                                placeholder="请输入图片地址"
                                onChange={(e) => changeChildrenItem(index, 'imageUrl', e.target.value)}
                            />
                        </div>
                        <div className={styles.row}>
                            <span className={styles.label}>链接</span>
                            <Input
                                value={link}
                                className={styles.content}
                                placeholder="请输入跳转链接"
                                onChange={(e) => changeChildrenItem(index, 'link', e.target.value)}
                            />
                        </div>
                    </div>
                ))
            }
        </div>
    )
}

export default List;